<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>175-事件委托.html</title>
</head>
<body>
	<button id="btn">添加元素</button>
	<ul id="list">
		<li>1 <a href="#">删除</a></li>
		<li>2 <a href="#">删除</a></li>
		<li>3 <a href="#">删除</a></li>
		<li>4 <a href="#">删除</a></li>
		<li>5 <a href="#">删除</a></li>
		<li>6 <a href="#">删除</a></li>
	</ul>
</body>
<script>
	var oBtn = document.getElementById('btn');
	oBtn.onclick = function(){
		var oLi = document.createElement('li');
		oLi.innerHTML = "new li";
		var oA = document.createElement('a');
		oA.href = "#";
		oA.innerHTML = "删除";
		oA.className = "del";
		oLi.appendChild(oA);
		oUl.appendChild(oLi);
	}
	var oUl = document.getElementById('list');
	var aA = document.getElementsByTagName('a');


	for(var i =0;i<aA.length;i++){
		aA[i].onclick = function(){
			oUl.removeChild(this.parentNode);
		}
	}
	


	// var oUl = document.getElementById('list');
	oUl.onclick = function(ev){
		// alert(11);
		// console.log(ev.target);
		ev.stopPropagation();
		var oTarget = ev.target;
		if(oTarget.className =="del"){
			oUl.removeChild(oTarget.parentNode);
		}
		
	}
</script>
</html>